<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="utf-8">

<title>bootstrap-wysihtml5</title>


<link rel="stylesheet" type="text/css" href="components/bootstrap/dist/css/bootstrap.min.css"></link>
<link rel="stylesheet" type="text/css" href="components/bootstrap/dist/css/bootstrap-theme.min.css"></link>
<link rel="stylesheet" type="text/css" href="components/components-font-awesome/css/font-awesome.min.css"></link>
<link rel="stylesheet" type="text/css" href="src/bootstrap3-wysihtml5.css"></link>

<style type="text/css" media="screen">
  .btn.jumbo {
    font-size: 20px;
    font-weight: normal;
    padding: 14px 24px;
    margin-right: 10px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
  }

  div.textarea {
    width: 100%; 
    font-size: 14px; 
    line-height: 18px;
    background-color: white;
    min-height: 200px;
  }

  div.textarea.fixed {
    overflow-y: scroll;
    height: 200px; 
  }

</style>

</head>
<body>
<div class="container">
  <div class="jumbotron" style="margin-top:40px">
    <h1 style="font-size:58px">bootstrap-wysihtml5 <br/><small>Simple, beautiful wysiwyg editors</small></h1>
    <hr style="border-color: white"/>
    <h1>First editor (Textarea)</h1>
    <textarea id="textarea1" class="textarea" placeholder="Enter text ..." style="width: 100%; height: 200px; font-size: 14px; line-height: 18px;"></textarea>
    <h1>Second editor (Div)</h1>
    <div id="textarea2" class="textarea fixed" placeholder="Enter text ..."></div>
    <h1>Third editor (Div)</h1>
    <div id="textarea3" class="textarea" placeholder="Enter text ..."></div>
  </div>

  <div class="row">
    <div class="span6">
          <h2>About</h2>
          <p>
        bootstrap-wysihtml5 is a javascript plugin that makes it easy to create simple, beautiful wysiwyg editors with the help of <a href="https://github.com/xing/wysihtml5">wysihtml5</a> and <a href="http://twitter.github.com/bootstrap/">Twitter Bootstrap 3</a>
      </p>

      <p style="text-align:center; margin-top:20px">
        <a class="btn btn-large btn-primary jumbo" href="https://github.com/Waxolunist/bootstrap3-wysihtml5-bower/">View project on Github</a>
      </p>
    </div>
    <div class="span6" >
      <h2>Usage</h2>

      <p>
        <pre>$('.textarea').wysihtml5();</pre>     
      </p>

    </div>
  </div>
</div>


<!--
<script src="components/wysihtml5/dist/wysihtml5-0.3.0.js"></script>
-->
<script src="components/wysihtml5x/dist/wysihtml5x-toolbar.js"></script>
<script src="components/jquery/dist/jquery.min.js"></script>
<script src="components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="components/handlebars/handlebars.runtime.min.js"></script>
<script src="src/generated/templates.js"></script>
<script src="src/bootstrap3-wysihtml5.js"></script>
<script src="src/locales/bootstrap-wysihtml5.en-US.js"></script>
<script src="src/locales/bootstrap-wysihtml5.de-DE.js"></script>
<script src="src/generated/commands.js"></script>

<script>
  $('#textarea1').wysihtml5({
    toolbar: {
      'html': true
    },
    locale: 'de-DE',
    parserRules: {
      'classes': {
        'mytxtimg': 1
      },
      'tags': {
        'a': {
          'check_attributes': {
            'href': 'href'
          } 
        },
        'img': {
          'set_class': 'mytxtimg'
        }
      }
    }
  });
    
  $('#textarea2').wysihtml5({
    toolbar: {
      'html': true,
      fa: true
    },
    locale: 'de-DE'
  });
    
  $('#textarea3').wysihtml5({
    toolbar: {
      'html': true
    },
    size: 'sm',
    locale: 'de-DE'
  });

  //Example for setting value at runtime
  $('#textarea1').val('Some text');
  console.log($('#textarea1').val());
  $('#textarea3').html('Some text');
  console.log($('#textarea3').html());

  function copyVals() {
    console.log('here');
    $('#textarea2').html($('#textarea1').val());
  }
</script>

<div>
  <p>
    Copy text from textare1 to textarea2:
  </p>
  <input type="button" onclick="copyVals()" value="copy"/>
</div>

</body>
</html>
